<script setup lang="ts">
import {TabsPaneContext} from "element-plus";
import {computed, nextTick, reactive, ref} from "vue";
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  LegendComponent,
  LegendComponentOption
} from 'echarts/components';
import { PieChart, PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import {useTeacherClassListApi} from "@/api/college/teacher";
import Dossier from "@/views/dossier/index.vue"
import {useClassSelectApi} from "@/api/college/class";
import {useClassStudentApi} from "@/api/college/student";
import FastTableColumn from "@/components/fast-table-column/src/fast-table-column.vue";
import { log } from "echarts/types/src/util/log";
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);
type EChartsOption = echarts.ComposeOption<
    | TitleComponentOption
    | TooltipComponentOption
    | LegendComponentOption
    | PieSeriesOption
>;
let option: EChartsOption;

const classList = ref<{id: string, name: string}[]>([])
const studentList = ref<any[]>([])
const total = ref<number>(0)
const queryForm = reactive({
  classId: "",
  page: 1,
  limit: 20
})

const maleNum = computed(()=>{
  return studentList.value.reduce((total, item)=>{
    console.log(total, item)
    return total + (item.sex === 1? 1 : 0)
  }, 0)
})
const womanNum = computed(()=>{
  return studentList.value.reduce((total, item)=>{
    return total + (item.sex === 2? 1 : 0)
  }, 0)
})

init()
function init(){
  getClassList()
}
function getClassList(){
  useClassSelectApi().then(res=>{
    classList.value = res.data
    queryForm.classId = classList.value[0]?.id
    getClassInfo()
  })
}
function getClassInfo(){
  useClassStudentApi(queryForm).then(res=>{
    studentList.value = res.data.list
    total.value = res.data.total
    nextTick(()=>{
      draw1()
      draw2()
      draw3()
    })
  })
}
let formatNumber = function (num: number) {
  // let reg = /(?=(\B)(\d{3})+$)/g;
  // return num.toString().replace(reg, ",");
  return num
};

/**
 * 画图-男女比例
 */
function draw1(){
  const chartDom = document.getElementById('main1')!;
  const myChart = echarts.init(chartDom);
  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    title: [
      {
        text: '男女比例',
        left: 'center'
      },
      {
        text: "{name|总数}\n{val|" + total.value + "}",
        top: "center",
        left: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              fontWeight: "normal",
              color: "#666666",
              padding: [10, 0],
            },
            val: {
              fontSize: 32,
              fontWeight: "bold",
              color: "#333333",
            },
          },
        },
      }
    ],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: maleNum.value, name: '男' },
          { value: womanNum.value, name: '女' },
        ],
      }
    ]
  };
  option && myChart.setOption(option);
}
/**
 * 画图-党团占比
 */
function draw2(){
  const chartDom = document.getElementById('main2')!;
  const myChart = echarts.init(chartDom);
  option = {
    title: [
      {
        text: '党员占比',
        left: 'center'
      },
      {
        text: "{name|党员人数}\n{val|" + 1 + "}",
        top: "center",
        left: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: 24,
              fontWeight: "normal",
              color: "#666666",
              padding: [10, 0],
            },
            val: {
              fontSize: 32,
              fontWeight: "bold",
              color: "#333333",
            },
          },
        },
      }
    ],
    color:['#3BA272',"rgb(238,214,66)"],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 20, name: '总人数' },
          { value: 1, name: '党员人数' },
        ],
      }
    ]
  };
  option && myChart.setOption(option);
}
/**
 * 画图-团团占比
 */
function draw3(){
  const chartDom = document.getElementById('main3')!;
  const myChart = echarts.init(chartDom);
  option = {
    title: [
      {
        text: '团员占比',
        left: 'center'
      },
      {
        text: "{name|团员人数}\n{val|" + 5 + "}",
        top: "center",
        left: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: 24,
              fontWeight: "normal",
              color: "#666666",
              padding: [10, 0],
            },
            val: {
              fontSize: 32,
              fontWeight: "bold",
              color: "#333333",
            },
          },
        },
      }
    ],
    color:['#3BA272',"rgb(238,214,66)"],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 20, name: '总人数' },
          { value: 5, name: '团员人数' },
        ],
      }
    ]
  };
  option && myChart.setOption(option);
}
function  setStudent(id:any){
  queryForm.classId = id
  getClassInfo()
}

const centerDialogVisible = ref(false)
const studentId = ref("")
function queryDossier(id: string){
  studentId.value = id
  centerDialogVisible.value = true
}
</script>

<template>
  <el-card>

    <el-scrollbar>
      <div class="class_list">
        <p>班级：</p>
        <div v-for="item in classList"
             @click="setStudent(item.id)"
             :key="item.id"
             class="item"
             :class="{'on': queryForm.classId === item.id}">{{item.name}}</div>
      </div>
    </el-scrollbar>
   <div style="display: flex; margin-top: 15px">
     <div id="main1"></div>
     <div id="main2"></div>
     <div id="main3"></div>
   </div>
    <el-table :data="studentList">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="学号" prop="code"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <fast-table-column dict-type="user_gender" label="性别" prop="sex"></fast-table-column>
      <el-table-column>
        <template v-slot="scope">
          <el-button type="primary" plain @click="queryDossier(scope.row.id)">查看档案</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog v-model="centerDialogVisible" title="档案信息" width="1200" center>
    <Dossier :student-id="studentId" edit></Dossier>
  </el-dialog>
</template>

<style scoped lang="scss">
.class_list{
  display: flex;
  align-items: center;
}
.class_list .item{
  padding: 8px 10px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
}
.class_list .item:first-child{
  margin-left: 0;
}
.class_list .item:hover{
  color: rgb(119, 192, 208);
}
.on{
  background: rgb(119, 192, 208);
  color: white!important;
}
#main1, #main2, #main3{
  flex: 1;
  height: 300px;
}
</style>
